<template>
	<view class="index-box">
		<view class="header-box">
			<image class="header-box-img" src="./../../static/img/index-bg.png" mode=""></image>
		</view>
		<!-- <view class="bar-box">
			<view :class="{'bar-item':true,active: item.active}" v-for="(item,index) in barItem" :key="index">
				<view class="label">{{item.label}}</view>
				<view v-if="item.active" class="line"></view>
			</view>
		</view> --> 
		<SearchCom :searchFun="searchFun" :data="search" :resetSearchFun="resetSearchFun" :confirmSearchFun="confirmSearchFun" placeholder="请输入名称">
				<view class="search-item">
					<view class="search-item-title">
						合同编号
					</view>
					<input class="search-item-input" v-model="search.hetong_sn" placeholder="请输入内容" />
				</view>
				<view class="search-item">
					<view class="search-item-title">
						中国车牌
					</view>
					<input class="search-item-input" v-model="search.chnia_chehao" placeholder="请输入内容" />
				</view>
		</SearchCom>
		
		<view class="list-box">
			
			<view class="list-item" v-for="(item,index) in lists" :key="index" @click="goDetail(item)">
				<uni-swipe-action>
					<!-- 使用插槽 （请自行给定插槽内容宽度）-->
					<uni-swipe-action-item>
						<view class="list-item-content">
							<view class="list-item-header">
								<view class="line"></view>
								<view class="name">{{item.name}}</view>
							</view>
							<view class="jianshu-zongji_price-xiaoshoutime">
								<view class="hetong_sn">合同编号: {{ item.hetong_sn }}</view>
								<view class="jianshu-xiaoshou_pricecount">
									<view class="jianshu">件数: {{ item.jianshu }}</view>
									<view class="xiaoshou_pricecount">销售总金额: {{ item.xiaoshou_pricecount }}</view>
								</view>
								<view class="zhichu_price">支付费用: {{ item.zhichu_price }}</view>
								<view class="zongji_price">越南费用总计: {{ item.zongji_price }}</view>
								<view class="xiaoshoutime">销售时间: {{ item.xiaoshoutime }}</view>								
							</view>
						</view>
						
						<template v-slot:right>
							<view class="swipe-btn">
								<view class="edit-btn" v-if="userInfo && userInfo.ifedite == '1'" @click.stop="editFun(item)">
									编辑
								</view>
								<view class="del-btn" v-if="userInfo && userInfo.ifdelete == '1'" @click.stop="delFun(item.order_sn)">
									删除
								</view>
							</view>
						</template>
					</uni-swipe-action-item>
				</uni-swipe-action>
				
			</view>
		</view> 
		
		<view class="load-more" v-if="hasMore && showMore">
				加载中...
		</view>
		
		<view class="load-more" v-if="!hasMore">
				没有更多了~
		</view>
		
		<!-- 新增按钮 -->
		<view class="search-btn" @click="addEditOrder" v-if="userInfo && userInfo.ifadd == '1'">
			<view class="icon iconfont icon-jiajianzujianjiahao"></view>
		</view>
		
	</view>
</template>

<script setup>
	import {
	    onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	import { ref, computed  } from "vue";
	import { getUserInfo } from "./../../utils/getUserInfo.js"
	import SearchCom from "@/components/common/SearchCom/SearchCom.vue";
	import { GetCreateOrderList, DeleteOrderDetile } from "@/configure/api/order.js"
	import { showSuccessMsg } from "../../utils/msg.js";
	
	const userInfo = ref()
	const blockTitItem = ref([
		{
			label: "常用功能",
			value: "常用功能"
		}
	])
	
	const blockItem = ref([
		{
			img: "../../static/img/b-people.png",
			label: "人员管理",
			value: "人员管理"
		}
	])
	
	const headerItem = ref([
		{
			label: '本年',
			value: '本年',
			active: true
		},
		{
			label: '本月',
			value: '本月',
			active: false
		}
	])
	
	const barItem = ref([
		{
			label: '销售单',
			value: '销售单',
			active: true
		}
	])
	
	const gologin = () => {
		uni.navigateTo({url:`/pages/login/login`})
	}
	
	const actHeader = (index) => {
		headerItem.value.forEach((v,i)=>{
			if(i == index){
				headerItem.value[i].active = true;
			}else{
				headerItem.value[i].active = false;
			}
		})
	}
	
	const actBlockItem = () => {
		uni.navigateTo({url:`/pages/index/people/people`})
	}
	
	const addEditOrder = () => {
		uni.navigateTo({url:`/pages/index/order-detail-add-edit/order-detail-add-edit?state=add`})
	}
	
	// 列表
	const pageNo = ref(1);
	const pageSize = ref(10);
	const total = ref(10);
	const showMore = ref(false);
	const lists = ref([])
	
	const search = ref({
		hetong_sn: '',
		chnia_chehao: '',
	})
	
	const searchFun = (keywords)=>{
		search.value.name = keywords
		getLists(true)
	}
	
	
	const resetSearchFun = () => {
		search.value = {
			hetong_sn: '',
			chnia_chehao: '',
		}
	}
	
	const confirmSearchFun = () => {
		searchFun()
	}
	
	const getLists = (reload) => {
		
		showMore.value = true;
		
		if(reload){
			pageNo.value = 1
			lists.value = []
		}
		
		const opt = {pageNo: pageNo.value,pageSize: pageSize.value,create_userid: userInfo.value.id};
		
		Object.keys(search.value).forEach((v,i)=>{
			if(search.value[v]){
				opt[v] = search.value[v]
			}
		})
	
		GetCreateOrderList(opt).then((data)=>{
			lists.value = [...lists.value,...data.data];
			lists.value = lists.value.map(v=>{
				return{
					...v,
					xiaoshoutime: v.xiaoshoutime.split(" ")[0]
				}
			})
			let obj = {};
			
			lists.value = lists.value.reduce (function(item,next){
			
				obj[next.id] ? ' ' : obj[next.id]  = true && item.push(next)
				
				return item;
			
			},[]);
			
			total.value = parseInt(data.msg);
			showMore.value = false;
			uni.stopPullDownRefresh();
			
		})
	
		
	}
	
	onPullDownRefresh(()=> {
		getLists(true);
	}) 
	
	const hasMore = computed(()=>{
		return pageNo.value * pageSize.value < total.value
	})
	
	onReachBottom(()=>{
		if(  hasMore.value && !showMore.value ){
			pageNo.value ++;
			getLists();
		}
		
	})
	
	const editFun = (item) => {
		uni.navigateTo({url:`/pages/index/order-detail-add-edit/order-detail-add-edit?state=edit&order_sn=${item.order_sn}`})
	}
	
	const goDetail = (item) => {
		uni.navigateTo({url:`/pages/index/order-detail-add-edit/order-detail-add-edit?state=read&order_sn=${item.order_sn}`})
	}
	
	const delFun = (order_sn) => {
		uni.showModal({
		    title: '提示',
		    content: '确认删除?',
		    success: async function (res) {
		        if (res.confirm) {
					
					let res = await DeleteOrderDetile({order_sn})
					if(res.code == 200){
						showSuccessMsg("删除成功!");
						getLists(true)
					}
					
		        } else if (res.cancel) {
		            
		        }
		    }
		});
	}
	
	onLoad((detail)=>{
		
	})
	
	onShow((detail)=>{
		getUserInfo().then((res)=>{
			userInfo.value = res;
			getLists(true);
		})
	})

</script>

<style lang="scss">
	.search-content.active{
		top: 585rpx!important;
	}
	
	.search-content-bg.active{
		top: 585rpx!important;
	}
	
	.index-box{
		min-height: 100%;
		background-color: #f3f3f3;
		padding-top: 615rpx;
		box-sizing: border-box;
		
		.header-box{
			background-color: #fff;
			// padding-bottom: 30rpx;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 9999999;

			.header-box-img{
				width: 750rpx;
				height: 455rpx;
			}
		}
		
		.bar-box{
			top: 455rpx;
		}
		// .bar-box{
		// 	position: fixed;
		// 	top: 455rpx;
		// 	left: 0;
		// 	right: 0;
		// 	width: 100%;
		// 	height: 80rpx;
		// 	padding: 0 40rpx;
		// 	box-sizing: border-box;
		// 	background-color: #fff;
		// 	@include flex-start();
			
		// 	.bar-item{
		// 		height: 80rpx;
		// 		margin-right: 50rpx;
		// 		position: relative;
		// 		@include flex-center();
				
		// 		.label{
		// 			font-size: 28rpx;
		// 			color: #666666;
		// 		}
				
		// 		.line{
		// 			height: 5rpx;
		// 			width: 80%;
		// 			background-color: var(--mainColor);
		// 			position: absolute;
		// 			bottom: 0;
		// 			left: 50%;
		// 			transform: translateX(-50%);
		// 		}
		// 	}
			
		// 	.bar-item.active{
		// 		.label{
		// 			font-weight: bold;
		// 			color: var(--mainColor);
		// 		}
		// 	}
		// }
		
		.search-btn{
			position: fixed;
			right: 50rpx;
			bottom: 100rpx;
			width: 100rpx;
			height: 100rpx;
			background-color: var(--mainColor);
			border-radius: 300rpx;
			@include flex-center();
			
			.icon{
				color: #fff;
				font-size: 35rpx;
			}
		}
		
	}
	
	.list-box{
		width: 100%;
		// padding: 30rpx;
		// padding-top: 0;
		box-sizing: border-box;
		
		.list-item:last-child{
			margin-bottom: 0;
		}
		
		.list-item{
			background-color: #fff;
			width: 100%;
			padding: 30rpx 40rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			margin-bottom: 30rpx;
			
			.list-item-content{
				.list-item-header{
					display: flex;
					align-items: stretch;
					margin-bottom: 30rpx;
					.line{
						width: 7rpx;
						// height: 100%;
						margin-right: 20rpx;
						background-color: var(--mainColor);
					}
					.name{
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
					}
				}
				
				.jianshu-zongji_price-xiaoshoutime{
					.hetong_sn,.jianshu,.zhichu_price,.zongji_price,.xiaoshoutime,.xiaoshou_pricecount{
						font-size: 30rpx;
						color: #333;
					}
					.hetong_sn{
						margin-bottom: 25rpx;
					}
					.jianshu-xiaoshou_pricecount{
						margin-bottom: 25rpx;
						@include flex-start();
					}
					.jianshu{
						margin-right: 30rpx;
					}
					.zhichu_price{
						margin-bottom: 25rpx;
					}
					.zongji_price{
						margin-bottom: 25rpx;
					}
					.xiaoshoutime{
						
					}
				}
			}
			
		}
		
		
	}
</style>
